.puz-clock {
  @extend %flex-center-nowrap;

  position: relative;

  &__time {
    font-family: 'storm';
    font-size: 5em;
    transition: color 0.3s;
    margin: 2vh 0;

    @include breakpoint($mq-col2) {
      margin: 0 0 -0.2em 0;
    }
  }

  @keyframes mod-fade-out {
    from {
      transform: translate(0, -10px);
      opacity: 1;
    }

    to {
      transform: translate(0, -40px);
      opacity: 0.3;
    }
  }

  &__bonus,
  &__malus {
    font-family: 'storm';
    font-size: 3.5em;
    color: $c-good;
    margin-left: 0.3ch;
    animation: mod-fade-out 1.1s ease-out;
  }

  &__malus {
    color: $c-bad;
  }
}
